<template>
  <div class="page">
  		<h2>所在页面位置：{{pagename}}</h2>
  		<h3 class="abc">//模拟ajax数据 共7页 32条<br/>演示内容：页码数量设置显示5个</h3>
  		<ul class="ull">
			<li v-for="(item,index) in list"><span class="l">id:{{item.id}}</span> <span class="r">内容：{{item.text}}</span></li>
		</ul>
		<divue-pagination 
			:current="current" 
			:count="count" 
			:pageCount="pageCount" 
			:showPageNum="showPageNum" 
			:showPageCount="showPageCount" 
			:totalData="totalData" 
			:showTotalData="showTotalData" 
			:nextPage="nextPage" 
			:coping="coping" 
			:showSkipPage="showSkipPage" 
			@runAjax="runAjax">
		</divue-pagination>
		<textarea style="background:#000;color:#fff;width:1000px;height:250px;">
			
		//配置
		current:1,               //存放返回当前第几页
		count:2,                          //当前页前后页数    (默认：2)
		pageCount:"",            //存放返回总页数
		showPageNum:1,					//是否显示页码     （默认值：1-显示 其他-不显示）
		showPageCount:1,               //是否显示总页数 （默认值：1-显示 其他-不显示）
		totalData:"",            //存放返回数据总条数
		showTotalData:1,               //是否显示数据总条数（默认值：1-显示 其他-不显示）
		nextPage:false,                   //是否有下一页
		coping:1,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）
		showSkipPage:1,               //是否显示跳页功能（默认值：1-显示 其他-不显
		</textarea>
  </div>
</template>

<script>
export default {
  name: 'pageHome',
  data () {
    return {
		pagename:"单个分页演示",
	
	
	
		list: [],                //存放返回当前页的数据
		
		current:1,               //存放返回当前第几页
		count:2,                          //当前页前后页数    (默认：2)
		pageCount:"",            //存放返回总页数
		showPageNum:1,					//是否显示页码     （默认值：1-显示 其他-不显示）
		showPageCount:1,               //是否显示总页数 （默认值：1-显示 其他-不显示）
		totalData:"",            //存放返回数据总条数
		showTotalData:1,               //是否显示数据总条数（默认值：1-显示 其他-不显示）
		nextPage:false,                   //是否有下一页
		coping:1,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）
		showSkipPage:1              //是否显示跳页功能（默认值：1-显示 其他-不显示）
			
    }
  },
  methods:{
  	runAjax:function(current){
			var that=this;
			
			var list=[];
			var pageCount="";
			var nextPage="";
			var totalData="";
			//模拟ajax数据 1-7页
			setTimeout(function(){		
				if(current==1){
					list=[
						{id:1,text:"我是显示内容111111"},
						{id:2,text:"我是显示内容222222"},
						{id:3,text:"我是显示内容3333333333"},
						{id:4,text:"我是显示内容44444444444"},
						{id:5,text:"我是显示内容555555555"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;
				}else if(current==2){
					list=[
						{id:1,text:"我是显示内容66666666"},
						{id:2,text:"我是显示内容7777777777"},
						{id:3,text:"我是显示内容8888888888"},
						{id:4,text:"我是显示内容99999999999"},
						{id:5,text:"我是显示内容101010"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==3){
					list=[
						{id:1,text:"我是显示内容111111111111111"},
						{id:2,text:"我是显示内容121212"},
						{id:3,text:"我是显示内容131313"},
						{id:4,text:"我是显示内容141414"},
						{id:5,text:"我是显示内容15515"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==4){
					list=[
						{id:1,text:"我是显示内容161616"},
						{id:2,text:"我是显示内容171717"},
						{id:3,text:"我是显示内容181818"},
						{id:4,text:"我是显示内容191919"},
						{id:5,text:"我是显示内容202020"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==5){
					list=[
						{id:1,text:"我是显示内容2121"},
						{id:2,text:"我是显示内容22222"},
						{id:3,text:"我是显示内容232323"},
						{id:4,text:"我是显示内容242424"},
						{id:5,text:"我是显示内容252525"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==6){
					list=[
						{id:1,text:"我是显示内容2626"},
						{id:2,text:"我是显示内容2727"},
						{id:3,text:"我是显示内容2828"},
						{id:4,text:"我是显示内容2929"},
						{id:5,text:"我是显示内容3030"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==7){
					list=[
						{id:1,text:"我是显示内容3131"},
						{id:2,text:"我是显示内容3232"}
					]
					pageCount=7;
					nextPage=false;
					totalData=32;			
				};
			
				that.list=list;
				that.current=current;
				that.pageCount=pageCount;
				that.nextPage=nextPage;
				that.totalData=totalData;
				  
				  
			},200);		
	}
  },
  created:function(){
  		//模拟返回第一页数据
  		this.runAjax(1);
		
  },
  mounted:function(){
	
  }
}
</script>

<style>
	h3{text-align:left;}
	ul{ list-style:none;}
	ull{ margin:100px auto; width:1000px;line-height:30px;}
	li{height:30px;}
	.l{float:left;width:300px;}
	.r{float:left;width:600px;}
</style>
